<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <link rel="stylesheet" href="./css/cart.css" />
    <script src="./js/jquery.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- 顶部导航 -->
    <div class="navTop">
      <div class="nav">
        <ul class="navLeft">
          <li class="menu">
            <a href="javascript:viod(0)">
              <span class="ico ico-star"></span>
              收藏花礼网(hua.com)
            </a>
          </li>
          <li class="menu dropdown">
            <a href="javascript:viod(0)">
              <span class="ico ico-wx"></span>
              关注微信
            </a>
            <div class="dropdown-menu dro-wx">
              <img src="./images/img/wx.png" alt="" />
              <p>扫码关注<br />回复"礼物"更多惊喜！</p>
            </div>
          </li>
          <li class="menu dropdown">
            <a href="javascript:viod(0)">
              <span class="ico ico-mobile"></span>
              花礼网app
            </a>
            <div class="dropdown-menu dro-wx">
              <img src="./images/img/app.png" alt="" />
              <p>新人专享100元APP礼包</p>
            </div>
          </li>
        </ul>
        <ul class="navRight">
          <!--登陆状态信息显示start-->
          <li class="menu login">
            <a href="./login.html">你好，请登录</a
            ><a href="./register.html">注册</a>
          </li>
          <!--登陆状态信息显示end-->
          <li class="nav-pipe">|</li>
          <li class="menu">
            <a href="javascript:viod(0)">订单查询</a>
          </li>
          <li class="nav-pipe">|</li>
          <!--我的花礼信息显示start-->
          <li class="menu dropdown">
            <a
              href="/member/"
              rel="nofollow"
              data-hover="dropdown"
              data-delay="0"
              target="_blank"
              >我的花礼</a
            >
          </li>
          <!--我的花礼信息显示end-->
          <li class="nav-pipe">|</li>
          <li class="menu dropdown">
            <a href="javascript:viod(0)"
              >客户服务<span class="glyphicon glyphicon-triangle-bottom"></span
            ></a>
            <div class="dropdown-menu dropdown-service">
              <a href="javascript:viod(0)">在线付款</a>
              <a href="javascript:viod(0)">帮助中心</a>
              <a href="javascript:viod(0)">售后服务</a>
              <a href="javascript:viod(0)">配送范围</a>
              <a href="javascript:viod(0)">留言反馈</a>
            </div>
          </li>
          <li class="nav-pipe">|</li>
          <!--购物车信息显示start-->
          <li class="menu dropdown">
            <a href="./cart.html" data-delay="0"
              ><span class="ico ico-cart"></span>购物车<span
                class="text-primary"
                id="gwcCount"
                >(0)</span
              ><span class="glyphicon glyphicon-triangle-bottom"></span
            ></a>
            <div class="dropdown-menu dropdown-cart" id="CartInfo">
              <div class="empty">
                您的购物车中没有商品,<a href="/">先去选购吧</a>!
              </div>
            </div>
          </li>
          <!--购物车信息显示end-->
          <li class="nav-pipe">|</li>
          <li class="menu slogan">鲜花礼品网:中国领先的鲜花网品牌</li>
        </ul>
      </div>
    </div>
    <!-- 头部 -->
    <header>
      <div class="logo"></div>
      <div class="service serviceDefault">
        <span class="phone-400">
          <span class="ico ico-phone"></span>
          400-889-8188
        </span>
        <a id="header-chat" href="javascript:void(0);">
          <span class="ico ico-headset"></span>
          在线客服
        </a>
      </div>
    </header>
    <div class="container">
      <div class="cart-panel">
        <div class="hd">
          <ul>
            <li class="selecter"></li>
            <li class="product">商品名称</li>
            <li class="market-price">单价</li>
            <li class="order-price">订购价</li>
            <li class="num">数量</li>
            <li class="operate">操作</li>
          </ul>
        </div>
        <div class="bd">
          <!-- <ul class="order-list" id="9012451">
            <li class="selecter">
              <i class="icon-select active"></i>
            </li>
            <li class="img-box">
              <a href="#"><img src="./images/img/01.jpg" /></a>
            </li>
            <li class="product">
              <a href="#" target='"_blank"'>
                <span class="product-title" style="line-height: 40px"
                  >[鲜花]韩式系列/公主的假日一粉玫瑰11枝、白色洋桔梗5枝、大叶尤加利10枝</span
                >
              </a>
            </li>

            <li class="market-price">
              <span class="price-sign">&yen;</span>
              <span class="price-num"> 239 </span>
            </li>
            <li class="order-price">
              <span class="price-sign">&yen;</span>
              <span class="price-num"> 298 </span>
              <input type="hidden" name="jrPrice" value="263" />
            </li>
            <li class="num">
              <div class="input-num">
                <a
                  href="javascript:void(0);"
                  class="btn btn_minus btn-default no"
                  ><i class="ico ico-minus"></i
                ></a>
                <input
                  type="text"
                  class="form-control input-sm"
                  name="cpsl"
                  value="1"
                  maxlength="3"
                />
                <a href="javascript:void(0)" class="btn btn_add btn-default"
                  ><i class="ico ico-add"></i
                ></a>
              </div>
            </li>
            <li class="operate">
              <a href="javascript:void(0)" class="delBtn">删除</a>
            </li>
          </ul> -->
        </div>
      </div>
      <div class="set-bar">
        <div class="set-info">
          <a class="back" href="/" style="width: 90px"
            ><span class="ico ico-back"></span>继续挑选</a
          >
          <div class="set-stat">
            应付金额:
            <div class="price">
              <span class="price-sign">&yen;</span>
              <span class="price-num" id="totalMoney">0</span>
            </div>
          </div>
        </div>
        <button class="btn btn-primary btn-lg" type="button" id="jiesuan">
          去结算
        </button>
      </div>
    </div>
    <!-- 服务 -->
    <div class="cart-server">
      <div class="toper-server">
        <ul>
          <li>
            <span class="ico ico-server-o1"></span>
            <h4>鲜花电商龙头</h4>
            <p>销量领先，权威认证龙头企业</p>
          </li>
          <li>
            <span class="ico ico-server-o2"></span>
            <h4>15年品牌 真实口碑</h4>
            <a href="/productpj/"><p>最近评价455588条</p></a>
          </li>
          <li>
            <span class="ico ico-server-o3"></span>
            <h4>鲜花送前实拍展示</h4>
            <p>展现送前实拍的鲜花网</p>
          </li>
          <li>
            <span class="ico ico-server-o4"></span>
            <h4>3小时送达</h4>
            <p>全国连锁，3小时送2000城市</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 尾部导航 -->
    <div class="footer-nav">
      <a href="/">首页</a> <b>|</b>
      <a href="/profile/about.htm" target="_blank">关于我们</a> <b>|</b>
      <a href="/profile/media.html" target="_blank">媒体报道</a> <b>|</b>
      <a
        class="phone-400"
        style="display: none"
        href="/profile/contact.htm"
        target="_blank"
        >联系方式</a
      >
      <b class="phone-400" style="display: none">|</b>
      <a href="/qiyetuangou/" target="_blank">企业团购</a> <b>|</b
      ><a href="/liansuo/" target="_blank">花店入驻</a><b>|</b>
      <a href="/profile/links.htm" target="_blank">友情链接</a> <b>|</b>
      <a href="/member/payment/balancefill" target="_blank">在线补款</a>
      <b>|</b>
      <a class="last-child" href="/profile/why_choose_us.htm" target="_blank"
        >为什么选择花礼网</a
      >
    </div>
    <!-- 尾部 -->
    <footer>
      <div class="auth">
        <div class="center">
          <img src="//img02.hua.com/pc/assets/img/slogan.png" />
          <a href="javascritp:viod(0)"
            ><img src="//img02.hua.com/pc/assets/img/100.jpg"
          /></a>
          <a href="javascritp:viod(0)"
            ><img
              src="//img02.hua.com/pc/assets/img/bico1.jpg"
              alt="ICP"
              height="46"
              width="35"
          /></a>
          <a href="javascript:viod(0)">
            <img
              src="./images/img/govIcon.gif"
              alt=""
              style="width: 35px; height: 46px"
            />
          </a>
        </div>
      </div>
      <p>
        <a
          href="/profile/ChinaFlowerAssociation.htm"
          rel="nofollow"
          target="_blank"
          title="中国花卉协会会员"
          >中国花卉协会会员</a
        >
        <a href="/profile/chinaECA.htm" rel="nofollow" target="_blank"
          >中国电子商务协会会员</a
        >
        ICP经营许可证：<a>粤B2-20050744</a> <b>|</b>
        <a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank"
          >粤ICP备09171662号</a
        >
        <span class="ico beian"></span>粤公网安备44030502000373号 Copyright ©
        2005-2022
      </p>
      <p><a href="/">www.hua.com</a><span> 深圳市百易信息技术有限公司</span></p>
    </footer>
  </body>
</html>
<script>
  $(function () {
    $.ajax({
      url: "/cart/getCart",
      data: { uid: JSON.parse(sessionStorage.getItem("userinfo")).uId },
    }).then(function (result) {
      let { data } = result;

      let strHtml = ``;
      data.forEach((item) => {
        strHtml += `

      <ul class="order-list" data_pid="${item.pId}">
        <li class="selecter">
          <i class="icon-select"></i>
        </li>
        <li class="img-box">
          <a href="#"><img src="${item.cImg}" /></a>
        </li>
        <li class="product">
          <a href="#" target='"_blank"'>
            <span class="product-title" style="line-height: 40px"
              >${item.cName}</span
            >
          </a>
        </li>

        <li class="market-price">
          <span class="price-sign">&yen;</span>
          <span class="price-num"> ${item.cPrice} </span>
        </li>
        <li class="order-price">
          <span class="price-sign">&yen;</span>
          <span class="price-num"> ${item.cTotal} </span>
          <input type="hidden" name="jrPrice" value="263" />
        </li>
        <li class="num">
          <div class="input-num">
            <a
              href="javascript:void(0);"
              class="btn btn_minus btn-default no"
              ><i class="ico ico-minus"></i
            ></a>
            <input
              type="text"
              class="form-control input-sm"
              name="cpsl"
              value="${item.cNumber}"
              maxlength="3"
            />
            <a href="javascript:void(0)" class="btn btn_add btn-default"
              ><i class="ico ico-add"></i
            ></a>
          </div>
        </li>
        <li class="operate">
          <a href="javascript:void(0)" class="delBtn" data-cid=${item.cId}>删除</a>
        </li>
      </ul>
        `;
      });
      $(".bd").html(strHtml);
      $(".btn_add").on("click", function () {
        var num = $(this).prev().val();
        console.log(num);
        num++;
        $(this).prev().val(num);
        $(this)
          .parents()
          .siblings("li")
          .children(" .order-price .price-num")
          .text(
            $(this)
              .parents()
              .siblings("li")
              .children(" .market-price .price-num")
              .text() * num
          );
      });
      $(".btn_minus").on("click", function () {
        var num = $(this).next().val();
        if (num <= 1) {
          return;
        }
        num--;
        $(this).next().val(num);
        $(this)
          .parents()
          .siblings("li")
          .children(" .order-price .price-num")
          .text(
            $(this)
              .parents()
              .siblings("li")
              .children(" .market-price .price-num")
              .text() * num
          );
      });

      var sum = 0;
      // 选择
      $(".bd").on("click", ".icon-select", function () {
        if ($(this).hasClass("active")) {
          $(this).removeClass("active");
          sum -= parseInt(
            $(this)
              .parents()
              .siblings("li")
              .children(" .order-price .price-num")
              .text()
          );
          $("#totalMoney").text(sum);
        } else {
          $(this).addClass("active");

          sum += parseInt(
            $(this)
              .parents()
              .siblings("li")
              .children(" .order-price .price-num")
              .text()
          );
          $("#totalMoney").text(sum);
        }
      });
    });
  });
  //删除
  $(function () {
    $(".bd").on("click", ".operate  a", function () {
      console.log(1111);
      // data-cid
      let self = $(this);
      $.ajax({
        url: "/cart/delete",
        type: "post",
        data: {
          cId: $(this).data("cid"),
        },
      }).then(function (res) {
        if (res.code == 200) {
          console.log(self.parents("ul"));
          self.parents("ul").remove();
        }
      });
    });
  });
</script>
<script src="./js/cart.js"></script>
